<script setup>

import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

// 接受父组件传递的数据
const props = defineProps({
  data: {
    type: Object,
    require: true
  }
})
//console.log(props.data);
watch(
  () => props.data,
  () => {
    renderChart()
  },
  
  { deep: true }  // 监听对象或数组的深层变化
)
// 获取实例
const target = ref(null)
let myChart = null
onMounted(() => {
  myChart = echarts.init(target.value) // 初始化echarts
  renderChart()
})

// 构建option实例
const renderChart = () => {
  // 图表标题
  const options = {
    /* title: {
    text: '雷达图显示'
  }, */
  // 是否有多个进行区分
  /* legend: {
    data: ['Allocated Budget', 'Actual Spending']
  }, */
  // 坐标系配置
  radar:{
    name:{
      textStyle: {
        color: '#05D5Ff',
        fontSize: 14
      }
    },
    shape:'polygon', // 形状 多边形
    center: ['50%','50%'], // 位置
    radius: '80%', // 圆角
    startAngle: 120, // 开始角度
    // 轴线
    axisLine: {
      lineStyle: {
        color: 'rgba(5, 213, 255, 0.8)'
      }
    }, 
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(5, 213, 255, 0.8)'
      }
    },
    // 指示器文字
    indicator:props.data.risks.map((item) => ({
      name:item.name,
      max: 100
    })),
    splitArea: {
      show: false // 不展示拆分区域
    }
  },
  // 坐标极点
  polar:{
    center:['50%','50%'],
    radius: '0%'
  },
  // 坐标角度
  angleAxis: {
    min: 0, // 坐标刻度最小值
    interval: 5, // 分割间隔
    clockwise: false, // 增长逆时针
    axisTick:{
      show: false // 不显示刻度
    },
    axisLabel: {
      show: false // 不显示坐标轴文字
    },
    splitLine: {
      show: false // 不显示分割线
    }
  },
  // 径向轴
  radiusAxis: {
    min: 0, // 最小值
    interval: 20, // 间隔
    splitLine: {
      show: true // 不显示分割线
    }
  },
  // 核心数据
  series: [
    {
      type: 'radar', // 雷达图
      symbol: 'circle', // 拐点样式
      symbolSize: 10, // 拐点大小
      itemStyle: { // 拐点样式
        normal: {
          color: '#05D5FF'
        }
      },
      areaStyle: { // 区域填充样式
        normal: {
          color: '#05D5FF',
          opacity: 0.5
        }
      },
      lineStyle: { // 线条样式
        width: 2,
        color: '#05D5FF'
      },
      label: { // 图形上的文本标签
        normal: {
          show: true,
          formatter: (params) => {
            return params.value
          },
          color: '#fff'
        }
      },
      data: [
        {
          value: props.data.risks.map((item) => item.value)
        }
      ],
    }
  ]
  }
  // 通过 setOption(options)调用
  myChart.setOption(options)
}

</script>

<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>


<style lang="scss"  scoped>

</style>
